// @use '../../styles/vars'; TODO: use 为啥不生效

$item-height: 48px;
$hovered-bottom-height: 3px;
$hovered-item-height: $item-height - $hovered-bottom-height;

.x-navbar {
  background-color: aliceblue;
  display: flex;

  .x-navbar-link {
    height: $item-height;
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    text-decoration: none;

    &:hover {
      background-color: white;
      border-bottom: $hovered-bottom-height solid salmon;
    }
  }

  .x-navbar-item {
    height: $item-height;
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
  }
}
